<template>
  <view class="page-box">
    <view class="background-box"></view>
    <view class="content">
      <view class="title">MBIT简介</view>
      <view class="data">美国著名的心理学家凯恩琳·布里格斯和她的女儿伊莎贝尔·布里格斯·迈尔斯研制了迈尔斯－布里格斯类型指标（MBTI）。这个指标以瑞士心理学家荣格划分的8种类型为基础，加以扩展，形成四个维度，即：</view>
      <view class="inner-box">
        <view class="data-item" v-for="(item,index) in innerData" :key="index">
          <view class="inner-title">{{item.title}}</view>
          <view class="inner-data">{{item.data}}</view>
        </view>
      </view>
      <view class="data">每个人的性格都在四种维度相应分界点的这边或那边，我们称之为“偏好”。例如：如果你落在外倾的那边，称为“你具有外倾的偏好”；如果你落在内倾的那边，称为“你具有内倾的偏好”。</view>
      <view class="data">在现实生活中，每个维度的两个方面你都会用到，只是其中的一个方面你用得更自然、更容易、更快、更舒适，就好像每个人都会用到左手和右手，习惯用左手的人是左撇子，习惯用右手的人是右撇子。同样，你的性格类型就是你用得更自然、更容易、更快、更舒适的那种。 </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'introduce',
  data() {
    return {
      innerData: [
        {
          title: '我能影响或被外界影响',
          data: 'E（外倾）——（内倾）I'
        },
        {
          title: '我们自然注意到的信息类型',
          data: 'S（触觉）——（直觉）N'
        },
        {
          title: '我们做某一决定和得出某个结论的方法',
          data: 'T（思维）——（情感）F'
        },
        {
          title: '我们以固定的方式或者自然的方式做决定',
          data: 'J（判断）——（知觉）P'
        },
      ]
    }
  },
  onLoad(options) {
    uni.showShareMenu({
      path: '/pages/index/index',
      templateId:'glo725gg2dj70ekjd0',
      success(res) {
        console.log(`showShareMenu 调用成功`);
      },
      fail(res) {
        console.log(`showShareMenu 调用失败`);
      },
    });
  },
  methods: {
    onShareAppMessage() {
      let path = '/pages/index/index'
      return {
        path,
        templateId:'glo725gg2dj70ekjd0',
        success(res) {
          uni.hideShareMenu({
            success(res) {
              console.log(`showShareMenu 调用成功`);
            },
            fail(res) {
              console.log(`showShareMenu 调用失败`);
            },
          });
        },
        fail(err) {
          console.log(err);
        },
      };
    }
  }
}
</script>

<style lang="scss" scoped>
  .page-box {
    position: relative;
    padding-top: 34rpx;

    .background-box {
      position: absolute;
      top: 0rpx;
      left: 0rpx;
      right: 0rpx;
      bottom: 0rpx;
      background:linear-gradient(314deg,rgba(11,116,215,1) 0%,rgba(0,133,226,1) 100%);
    }

    .content {
      position: relative;
      margin: 0 auto;
      padding: 40rpx 50rpx 58rpx 50rpx;
      width: 700rpx;
      background:rgba(255,255,255,1);
      border-radius:15rpx;
      box-sizing: border-box;

      .title {
        font-size:34rpx;
        font-weight:500;
        color:rgba(33,33,33,1);
        line-height:34rpx;
        text-align: center;
      }

      .data {
        padding-top: 32rpx;
        font-size:28rpx;
        font-weight:400;
        color:rgba(33,33,33,1);
        line-height:42rpx;
      }

      .inner-box {
        margin-top: 32rpx;
        padding: 40rpx 31rpx 41rpx 59rpx;
        width: 100%;
        background:rgba(248,248,248,1);
        border-radius:10rpx;
        box-sizing: border-box;

        .data-item {
          .inner-title {
            font-size:28rpx;
            font-weight:500;
            color:rgba(0,107,190,1);
          }

          .inner-data {
            padding: 18rpx 0rpx 55rpx 0rpx;
            font-size:26rpx;
            font-weight:500;
            color:rgba(33,33,33,1);
          }
        }

        .data-item:last-child .inner-data {
          padding-bottom: 0rpx;
        }
      }
    }

    ::v-deep .details-btn-box {
      position: relative;
      padding: 60rpx 63rpx 65rpx 63rpx;
    }
  }
</style>
